<template>
	<view class="body">
		<uni-nav-bar class="nav" color="#1ABC9C" left-text="&lt;返回" @clickLeft="re" title="重置密码" />
		<view class="trunk">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item required label="手机号:" name="phone">
					<uni-easyinput :inputBorder="false" v-model="formData.phone" class="input_val" type="number"
						placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item required label="验证码:" name="code">
					<uni-easyinput :inputBorder="false" class="input_val code_img" type="number" v-model="formData.code" 
						placeholder="请输入验证码" maxlength="6" clearSize="0"/>
					<text class="send_code" v-if="!isCode" @click="sendCode">{{content}}</text>
					<text class="code_time" v-if="isCode" >{{content}}</text>
				</uni-forms-item>
				<uni-forms-item required label="新密码" name="password">
					<uni-easyinput :inputBorder="false" v-model="formData.password" class="input_val" type="password"
						placeholder="请输入密码" />
				</uni-forms-item>
				<button class="sub" @click="fPassword">确认重置</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	
	import {
		sendCode
	} from '../../static/http/getData.js'
	
	import {
		forgetPassword,
	} from '../../static/http/getData.js'
	
	export default {
		data(){
			return {
				formData: {
					phone: '',
					password: '',
					code:'',
				},
				rules: {
					// 对phone字段进行必填验证
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
								errorMessage: '请输入正确手机号',
							}
						]
					},
					// 对password字段进行必填验证
					password: {
						rules: [
							{
								required: true,
								errorMessage: '请输入密码',
							}, 
						]
					},
					//验证码验证
					code: {
						rules: [
							{
								required: true,
								errorMessage: '请输入验证码',
							},
						]
					},
				},
				//验证码文字
				content: '发送验证码',
				//验证码
				code: '123456',
				//定时器
				clock: '',
				//验证码倒计时时间
				timeout: 60,
				//倒计时期间隐藏可以点击的获取验证码
				isCode: false,
				//快速登录
				isQuickLogin: false,
			}
		},
		onLoad (){
			this.formData.phone = "";
			this.formData.password = "";
			this.formData.code = "";
		},
		methods:{
			fPassword(e) {
				//获取from中所有内容
				this.$refs.form.validate().then(res => {
					//判断验证码是否正确
					if(this.code == this.formData.code){
						forgetPassword(res).then(res =>{
							console.log(res.data.data);
							if(res.data.data == false){
								uni.showToast({
								    title: '重置密码失败',
									icon:'error',
								    duration: 2000
								});
							}else if(res.data.data == true){
								uni.showToast({
								    title: '重置密码成功',
								    duration: 2000
								});
								this.toLogin();
							}
						})
					}else{
						uni.showToast({
							title:"验证码有误",
							icon:'error',
							duration:2000
						})
					}
					this.formData.phone = "";
					this.formData.password = "";
					this.formData.code = "";
				});
			},
			//手机验证码登录
			sendCode() {
				this.$refs.form.validateField(['phone']).then(res => {
					sendCode(res).then(res => {
						this.code = res.data.data
						this.getCountdown();
					})
				}).catch(e => {
					uni.showToast({
						title: '手机号错误',
						icon: 'error',
						duration: 2000
					});
				})
			},
			//验证码倒计时
			getCountdown() {
				this.isCode = true;
				this.clock = window.setInterval(() => {
					this.content = this.timeout + 's后可重新发送';
					this.timeout--;
					if (this.timeout < 0) {
						this.timeout = 60;
						this.isCode = false;
						this.content = "重新发送验证码";
						window.clearInterval(this.clock);
					}
				}, 1000)
			},
			toLogin(){
				uni.redirectTo({
				    url: '/pages/login/login'
				});
			},
			//返回到登录
			re(){
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			},
		}
	}
</script>

<style>
	.nav{
		margin-top: 25px;
	}
	.trunk{
		width: 87%;
		margin: 30px auto;
	}
	.trunk .sub{
		background-color: #1ABC9C;
		color: #F2F6FC;
	}
	
	.send_code {
		position: absolute;
		top: 5px;
		right: 0;
		color: #1ABC9C;
	}
	
	.code_time {
		position: absolute;
		top: 5px;
		right: 0;
		color: #999999;
	}
</style>
